<template>
  <div>
    <h1>ABout View</h1>
    <p>title: {{ title }}</p>
    <button @click="modifyTitle">修改title</button>
    <p>admin: {{ userInfo.adminName }} <button type="button" @click="modifyUser">modifyUser</button></p>
    <ul>
      <li v-for="(item, index) in userInfo.child" :key="index">{{ item }}</li>
    </ul>

    <button type="button" @click="modifyList">modifyList</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.adminName }}
        <ol>
          <li v-for="(el, i) in item.child" :key="i">{{ el }}</li>
        </ol>
      </li>
    </ul>
    <AboutChild ref="myson" :title="title" a="1" b="2" c="3" :users="userInfo" @myclick="modifyList">
      <template v-slot:icon>
        <h1>icon->hahaha</h1>
      </template>
    </AboutChild>
  </div>
</template>

<script setup>
import AboutChild from '@/components/AboutChild.vue'
import { onMounted, reactive, ref } from 'vue'

let myson = ref(null)

onMounted(() => {
  // console.log(myson.value) // 相当于vue2里面的 this.$refs.myson 子组件实例对象
  // myson这个对象，就是一个通过ref包装过的组件实例对象，因为ref响应式变量，都是通过.value来拿值，所以
  // myson.value，就直接指向defineExpose()暴露的对象。
})
// <script setup> 中的代码会在每次组件实例被创建的时候执行
// console.log('aboutv view')
let title = ref('关于公司')

const modifyTitle = () => {
  // console.log(title) // proxy {_value: '关于公司'}
  title.value = '国信安'
}

let userInfo = reactive({ adminName: 'wqw', adminState: 1, adminRoid: 999, child: [1, 23, 234] })

const modifyUser = () => {
  userInfo.adminName = '张三'
  userInfo.child.push('100')
}

let list = reactive([
  { adminName: 'wqw', adminState: 1, adminRoid: 999, child: [1, 23, 234] },
  { adminName: 'wqw1', adminState: 1, adminRoid: 999, child: [1, 23, 234] },
  { adminName: 'wqw2', adminState: 1, adminRoid: 999, child: [1, 23, 234] }
])

const modifyList = v => {
  console.log(v)
  list.push({ adminName: 'wqw3', adminState: 1, adminRoid: 999 })
  list[2].adminName = 'kity'
  list[2].child.push('hello')
  list[2].child[0] = 'world'
  list[2].child.splice(1, 1)
  title.value = '...............'
}
</script>

<!-- <script>
export default {
  // 官方建议，不要再公开和VUE有关的实例选项
  // 也不建议混用，多个<script>
}
</script> -->

<style></style>
